<template>
  <div class="role-detail-conf">
    <vx-title-bar :list="['修改角色录入', '修改角色确认', '修改角色结果']" current="2" />
    <ui-form :model="form" class="vx-form">
      <ui-form-item label="角色编号"> {{ form.id }}</ui-form-item>
      <ui-form-item label="角色名称"> {{ form.name }}</ui-form-item>
      <ui-form-item label="菜单权限">
        <ui-tree
          ref="tree"
          :data="menulist"
          default-expand-all
          show-checkbox
          check-on-click-node
          node-key="id"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
        >
        </ui-tree>
      </ui-form-item>
      <ui-form-item label=" ">
        <ui-button class="default-btn" @click="$router.go(-1)">返回</ui-button>
        <ui-button :loading="isBtnLoading" class="primary-long-btn" @click="confirmTrue">确认</ui-button>
      </ui-form-item>
    </ui-form>
  </div>
</template>

<script>
import roleApi from '@/api/role.js';
export default {
  name: 'role-detail-index',
  data() {
    return {
      menulist: (this.getData() && this.getData().menuTree) || [],
      form: (this.getData() && this.getData().role) || {},
      checkedKeys: (this.getData() && this.getData().checkedKeys) || [], //已授权的菜单列表
      defaultProps: {
        //树形组件绑定的属性
        children: 'children',
        label: 'name',
        disabled: this.disabledFn,
      },
      isBtnLoading: false,
    };
  },
  methods: {
    /**
     * 没有选择的禁用
     */
    disabledFn() {
      return true;
    },
    /**
     * 确定修改
     */
    async confirmTrue() {
      try {
        this.isBtnLoading = false;
        const parmas = {
          id: this.form.id, //id
          name: this.form.name, //name
          menuIds: this.getData().menuIds, //选中的数据的id 字符串逗号隔开
        };
        const res = await roleApi.roleEdit(parmas);
        this.setData({
          res: res,
        });
        this.$router.push({
          path: '/system/role/role-detail/role-detail-res',
        });
      } finally {
        this.isBtnLoading = false;
      }
    },
  },
};
</script>

<style></style>
